<template>
  <div>
    <van-cell v-for="(item, index) in list" :key="index" >
      <van-image
        slot="icon"
        round
        width="30"
        height="30"
        style="margin-right: 10px;"
        :src="item.aut_photo"
      />
      <span style="color: #466b9d;" slot="title">{{item.aut_name}}</span>
      <div slot="label">
        <p style="color: #363636;">{{item.content}}</p>
        <p class="time-comment">
          <span style="margin-right: 10px;">{{item.pubdate | relativeTime}}</span>
          <van-button size="mini" type="default" @click="replyFn(item)">回复 {{item.reply_count}} </van-button>
        </p>
      </div>
      <template v-slot:right-icon>
        <!-- 1. 给按钮注册事件 -->
        <div
          class="like-count"
          :style="{ color: item.is_liking ? 'red' : '#333'}"
          @click="changeLikeCount(item)"
        >
          <van-icon :name="item.like_count ?  'good-job' : 'good-job-o' " />
          <span>{{ item.like_count || '赞'}}</span>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
// 4. 导入接口
import {addCommentLike, deleteCommentLike} from '@/api/comment'
// 1. 导入中介
import Bus from '@/utils/bus'

export default {
  name: 'article-val',
  props: ['list'],
  methods: {
    async changeLikeCount(item) {
      try {
        if(item.is_liking) {
          // 取消点赞
          await deleteCommentLike(item.com_id)
          item.like_count -= 1
        } else {
          // 添加点赞
          await addCommentLike(item.com_id)
          item.like_count += 1
        }
        // 5. 修改 标识， 改变父组件的 值  取反
        item.is_liking = !item.is_liking
      } catch(err) {
        console.log(err)
      }
    },
    // 2、 点击按钮 执行事件
    replyFn(item) {
      // 3. 借助中介 广播数据
      Bus.$emit('reply-click', item)
    }
  }
}
</script>

<style scoped>
.time-comment {
  display: flex;
  align-items: center;
}
</style>
